<template>
	<view class="page">
		<!-- <button @click="getViewReset">重置</button> -->
		<!-- <button @click="getViewContent">获取内容1</button> -->

		<view style="border: 5px solid green;position: relative;">
			<!-- <view style="width: 0px;height: 0px;overflow: hidden;"> -->
			<span style="position:absolute;left:0px;width:100px;text-align:center;border-left: 3px solid blue;"
				ref="myView1" :style="{height:successHeight+'px'}" class="myView1"
				id="myView1">success{{successHeight}}</span>
			<span style="position:absolute;right:0px;width:100px;text-align:center;border-right: 3px solid blue;"
				ref="myView2" class="myView2" :style="{height:errorHeight+'px'}"
				id="myView2">error{{errorHeight}}</span>
		</view>
		<!-- <navbar :showBack="true" titleText="赛季之星×SPBCN" /> -->
		<view class="main">
			<view class="top-bar">
				<image class="logo" src="https://cdn.spbcn.org/yanxuan/seasonstar_round_logo_common.png"
					mode="heightFix"></image>
				<view class="fun-item" @click="fnNextWord(1)">
					<image src="https://cdn.spbcn.org/yanxuan/seasonstar_round_tool_icon_common.png" mode="heightFix">
					</image>
					<text>0</text>
				</view>
				<view class="fun-item" @click="fnNextWord(1)">
					<image src="https://cdn.spbcn.org/yanxuan/seasonstar_round_tool_icon2_common.png" mode="heightFix">
					</image>
					<text>0</text>
				</view>
				<view class="fun-item" @click="fnNextWord(1)">
					<image src="https://cdn.spbcn.org/yanxuan/seasonstar_round_tool_icon3_common.png" mode="heightFix">
					</image>
					<text>0</text>
				</view>
			</view>
			<view ref="aaaaaa" class="cn-title">第1轮：词汇纵横</view>
			<view v-show="false" id="currentWord">{{word}}</view>

			<view class="time-clock">
				<image class="clock" src="https://cdn.spbcn.org/yanxuan/seasonstar_round_tool_icon4_common.png"
					mode="aspectFit"></image>
				<view class="time">
					{{currentTime}}
				</view>

			</view>

			<!-- 宫格连线 -->
			<view class="game-area">
				<!-- <lineWord v-if="word!==''" :word="word" ref="uniWordList" @childMethod="parentMethod"
					v-on:pThumbsUp="thumbsUpChange">
				</lineWord> -->

				<mifeng v-if="canvasheight>0" ref="uniWordList" :positiony="-260" :canvaswidth="canvaswidth"
					:canvasheight="canvasheight">
				</mifeng>
			</view>

			<view>
				<!-- <view>inputValueStr：
					<view id="inputValueStr" ref="inputValueStr">333</view>
				</view> -->
				<view>选中的位置：
					<view id="selectedPosition"></view>
				</view>
				<view>选中的字母：
					<view id="selectedLetter"></view>
				</view>
			</view>
			<view>单词：{{ word }} 位置：{{ selectedPositionStr }} 字母：{{ selectedLetterStr }}</view>

			<!-- #ifdef MP-WEIXIN -->
			<button class="pass-btn" open-type="getPhoneNumber" @getphonenumber="getMobileNumber">111手机号码一键登录</button>
			<!-- #endif -->

			<view class="pass-btn" @click="passFn">PASS</view>
		</view>
	</view>
</template>

<script>
	import navbar from '../../components/navbar.vue'
	import lineWord from '../../components/threejs/line-word.vue'
	import selectWord from '../../components/threejs/select-word.vue'
	import mifeng from '../../components/games/mifeng.vue'

	export default {
		components: {
			navbar,
			mifeng,
			lineWord,
			selectWord,
		},
		watch: {
			inputValue(newVal, oldVal) {
				console.log('变化了---')
				// 当inputValue的值发生变化时执行对应的方法
				// this.handleInputValueChange(newVal);
			}
		},
		data() {
			return {
				canvaswidth: 0, //画布宽
				canvasheight: 0, //画布高

				wordList: [
					'apple',
					'oriange',
					'egg'
				],
				count: 0,
				word: 'apple',
				selectedPositionStr: '',
				selectedLetterStr: '',
				parentWidth: 0,
				totalTime: 20 * 60, //总时长，20分钟
				currentTime: '', //当前显示时间：剩余时间
				pgList: [50, 0, 0, 0],
				selectedLettersArr: [],
				selectedLettersStr: '',
				playStatus: false,
				inputValue: '',
				isTip: false,
				successHeight: 0,
				errorHeight: 0,
			}
		},
		mounted() {
			let that = this;

			// 设置监听器
			// uni.onStorage(function(res) {
			// 	if (res.key === 'myData') {
			// 		// 收到数据，进行处理
			// 		console.log('Received data:', res.newValue);
			// 	}
			// });


			uni.setStorageSync('word', 'apple');
			// this.parentWidth = this.$refs.pinciBox.offsetWidth;
			// this.parentWidth = window.innerWidth - 40 - 20;
			// this.parentWidth = 323;

			// console.log('2222222222222222222222222222222222222222222')
			// const myViewContent = this.$refs.myView.$el.textContent;
			// console.log(myViewContent);
			// console.log('2222222222222222222222222222222222222222222')

			setInterval(function() {
				if (that.totalTime == 0) {
					return false;
				}

				// that.getViewContent();

				that.totalTime -= 1;
				that.convertSecondsToHMS(that.totalTime);
			}, 1000); // 每隔一秒减1

			setTimeout(function() {
				uni.createSelectorQuery().select('.game-area').boundingClientRect(rect => {
					console.log('rect', JSON.stringify(rect))
					that.$nextTick(function() {

					})
					that.canvaswidth = rect.width;
					that.canvasheight = rect.height;
				}).exec();
			}, 500)
		},
		methods: {
			setProgress() {
				this.pgList = [20, 40, 60, 80]
			},
			clearProgress() {
				this.pgList = [0, 0, 0, 0]
			},

			methodToCall() {
				console.log('每位评委：内容变了')
			},
			getViewReset() {
				var that = this;
				that.successHeight = 0;
				that.errorHeight = 0;
			},
			getViewContent() {
				var that = this;
				// 使用uni.createSelectorQuery获取元素
				// 使用Vue的$refs获取元素
				const myView1 = this.$refs.myView1;
				const myView2 = this.$refs.myView2;
				if (myView1) {
					uni.createSelectorQuery().in(this).select('.myView1').boundingClientRect(data => {
						that.successHeight = data.height;
						if (data.height == 100) {
							that.successHeight = 0;
							document.getElementById("myView1").style.height = `0px`;
							uni.showToast({
								title: '恭喜，答对了',
								icon: 'none'
							})
							// console.log("得到布局位置信息myView1" + JSON.stringify(data));
							// console.log("节点离页面顶部的距离为myView1" + data.height);
						}
					}).exec();
				} else {
					console.error('元素未找到');
				}

				if (myView2) {
					uni.createSelectorQuery().in(this).select('.myView2').boundingClientRect(data => {
						that.errorHeight = data.height;
						if (data.height == 200) {
							that.errorHeight = 0;
							document.getElementById("myView2").style.height = `0px`;
							uni.showToast({
								title: '抱歉，答错了',
								icon: 'none'
							})
							// console.log("得到布局位置信息myView2" + JSON.stringify(data));
							// console.log("节点离页面顶部的距离为myView2" + data.height);
						}
					}).exec();
				} else {
					console.error('元素未找到');
				}
			},

			parentMethod() {
				console.log('1346')
				uni.showToast({
					title: '123456',
					icon: 'none'
				})
			},

			fnNextWord(type) {
				var that = this;
				that.word = "";
				setTimeout(function() {
					uni.setStorageSync('word', 'oriange');
					that.word = 'oriange';
				}, 500)
			},

			// 播放音频
			fnPlayWord() {
				let that = this;
				console.log('--播放--')
				// 创建内部音频上下文对象
				const innerAudioContext = uni.createInnerAudioContext();

				// 设置音频资源地址
				innerAudioContext.src = 'https://cdn.spbcn.org/audio/halfCityBaseAudio/system_answer_tip.mp3';

				// 播放音频
				innerAudioContext.play();

				// 监听音频开始播放事件
				innerAudioContext.onPlay(() => {
					that.playStatus = true;
					console.log('音频开始播放', that.playStatus);
				});

				// 监听音频播放结束事件
				innerAudioContext.onEnded(() => {
					that.playStatus = false;
					console.log('音频播放结束', that.playStatus);
				});

				// 暂停音频
				innerAudioContext.pause();
			},


			// js秒数转换成时分秒
			convertSecondsToHMS(seconds) {
				var hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
				var minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
				var remainingSeconds = (seconds % 60).toString().padStart(2, '0');

				this.currentTime = minutes + ":" + remainingSeconds + "min";
			},

			// 微信小程序获取手机号码
			getMobileNumber(e) {
				let that = this;
				console.log(e)
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					var code = e.detail.code;
					that.$http.ajax_login({
						code: code,
					}).then(res => {
						console.log(res)
					})

					// that.$http.get_phone_number({
					// 	code: code,
					// }).then(res => {
					// 	console.log(res)
					// })
				} else {
					console.log('用户拒绝');
				}
			},


			passFn() {
				uni.navigateTo({
					url: '/pages/game_round_3/start'
				})
			},

			thumbsUpChange(item) {
				// console.log('触发了', item)
				this.selectedPositionStr = item.selectedPositionStr;
				this.selectedLetterStr = item.selectedLetterStr;

				// console.log('判断正确与否：', this.word, this.selectedLetterStr.split(',').join(''))
				// 判断正确与否
				if (this.word == this.selectedLetterStr.split(',').join('')) {
					// this.changeView = false;
					this.count++;
					this.word = this.wordList[this.count];
					// this.$refs.uniWordList.init();


					// console.log('单词变了：', this.word)
					uni.showToast({
						title: '恭喜过关',
						icon: 'success', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
					uni.vibrateLong({
						success: function() {
							console.log('短暂震动');
						},
						fail: function(err) {
							console.error('震动失败', err);
						}
					});
				} else {
					uni.showToast({
						title: '请重试',
						icon: 'none',
						duration: 2000 //持续时间为 2秒
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.page {
		background-image: url(https://cdn.spbcn.org/yanxuan/seasonstar_list_guonei_back1.png);
		background-color: #f7b52c;
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
	}

	.main {
		padding: 42rpx;
	}

	.top-bar {
		display: flex;
		justify-content: space-between;

		.logo {
			height: 44rpx;
		}

		.fun-item {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: hzgb;
			color: #fff;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}
	}

	.cn-title {
		font-size: 50rpx;
		font-family: hzgb;
		color: #fff;
		margin-bottom: 10rpx;
		margin-top: 40rpx;
		text-align: center;
	}

	.time-clock {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;

		.clock {
			width: 90rpx;
			height: 90rpx;
			margin-right: 10rpx;
		}

		.time {
			color: #000;
			font-family: hzgb;
			font-size: 36rpx;
			border-radius: 12rpx;
			border: 1rpx solid #b10431;
			background-color: #ec6941;
			padding: 10rpx 30rpx;
		}
	}

	.game-area {
		width: 660rpx;
		height: 660rpx;
		background-color: #fff;
		margin: 30rpx auto;
		border-radius: 40rpx;
		overflow: hidden;
		border: 20rpx solid #FFF;
		box-sizing: border-box;
	}

	.pass-btn {
		width: 400rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: #fff;
		border-radius: 100rpx;
		margin: 60rpx auto;
		font-family: hzgb;
		font-size: 46rpx;
		color: #f82d3b;
		border-bottom: 10rpx solid #f95157;
		letter-spacing: 6rpx;
	}

	.progress-box {
		border: 2px solid white;
		border-radius: 50px;
		// background-image: url('https://cdn.spbcn.org/yanxuan/seasonstar_round_tool_icon2_common.png');
		/* 设置背景图片 */
		background-size: cover;
		/* 背景图片填充整个容器 */
		width: 100%;
		/* 根据需要设置高度 */
		position: relative;
	}

	.uni-icon {
		line-height: 1.5;
	}

	.progress-cancel {
		margin-left: 40rpx;
	}

	.progress-control button {
		margin-top: 20rpx;
	}

	.input-box {
		margin: 20px 0px;
	}

	.input-box .input {
		text-align: center;
		font-size: 25px;
		height: 50px;
		line-height: 50px;
		border-radius: 50px;
		background-color: white;
	}

	// 播放
	.play-box {
		text-align: center;
	}

	.play-box .play-btn {
		background-image: url(../../static/image/play.png);
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: center center;
		height: 68px;
		margin: 0 auto;
		text-align: center;
	}

	.play-box .playing {
		background-image: url(../../static/image/playing.png) !important;
	}
</style>